<template>
    <div class="share_container">
        <h3>{{ assetMetadata.name }}</h3>
        <div class="content">
            <el-form v-if="showOptions" :model="form" :rules="rules" ref="shareForm">
                <el-form-item label="有效期" prop="validityPeriod">
                    <el-radio-group v-model="form.validityPeriod">
                        <el-radio value="1">1天</el-radio>
                        <el-radio value="7">7天</el-radio>
                        <el-radio value="30">30天</el-radio>
                        <el-radio value="永久有效">永久有效</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="提取码" prop="customCode">
                        <el-input v-model="form.customCode" placeholder="请输入5位提取码" maxlength="5"></el-input>
                    </el-form-item> -->
                <el-form-item class="form_button">
                    <el-button @click="resetForm">取消</el-button>
                    <el-button type="primary" @click="submitForm">确认分享</el-button>
                </el-form-item>
            </el-form>
            <template v-else>
                <p class="word_break_all">分享连接: <a :href="shareLink">{{ shareLink }}</a></p>
                <!-- <p>提取码: {{ extractionCode }}</p> -->
                <el-button type="primary" @click="copyLink(shareLink)">复制链接及提取码</el-button>
            </template>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElForm, ElFormItem, ElRadioGroup, ElRadio, ElButton, FormInstance, FormRules } from 'element-plus';
import type { AssetMetadata } from '@/types/AssetMetadata';
import type { LinkMetadata } from '@/types/LinkMetadata.ts';
import { linkProviderCreates } from '@/api/linkProvider';
import { copyLink } from '@/utils/currency';

interface Props {
    shareLink: string;
    assetMetadata: AssetMetadata;
}

const props = defineProps<Props>();
const emit = defineEmits(['close']);

const showOptions = ref(true);
const shareLink = ref('');
// const extractionCode = ref('fXKBq');

const form = reactive({
    validityPeriod: '',
    // customCode: 'text1'
});

const rules: FormRules = {
    validityPeriod: [
        { required: true, message: '请选择有效期', trigger: 'change' }
    ],
    // customCode: [
    //     { required: true, message: '请输入提取码', trigger: 'blur' },
    //     { min: 5, max: 5, message: '提取码长度为5位', trigger: 'blur' }
    // ]
};

const shareForm = ref<FormInstance | null>(null);

const submitForm = () => {
    shareForm.value?.validate((valid) => {
        if (valid) {
            confirmShare();
        }
        // 不再返回 false 或 undefined
    });
};

const resetForm = () => {
    shareForm.value?.resetFields();
    showOptions.value = true;
    emit('close'); // 通知父组件关闭浮层
};

const confirmShare = async () => {
    const period = form.validityPeriod;
    // const code = form.customCode;
    // const newShareLink = `${props.shareLink}?period=${period}&code=${code}`;
    // shareLink.value = newShareLink;
    // extractionCode.value = code;
    showOptions.value = false;
    
    // 天数转成 秒
    const duration = period === '永久有效' ?999999*86400 : +period * 86400;
    const linkMetadata: LinkMetadata = {
        namespaceId: props.assetMetadata.namespaceId,
        name: props.assetMetadata.name,
        hash: props.assetMetadata.hash,
        duration: duration, // 分享链接有效时长，单位是秒
        type: 1,
    };
    const { url } = await linkProviderCreates(linkMetadata);
    if (url) {
        shareLink.value = url.url;
    }
};


</script>

<style lang="scss" scoped>
.share_container {


    h3 {
        margin-bottom: 16px;
        font-size: 18px;
        color: #333;
    }

    .content {
        display: flex;
        flex-direction: column;

        p {
            margin: 0;
            font-size: 14px;
            color: #666;
        }

        a {
            color: #409eff;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }


        .el-input {
            width: 100%;
        }

        .form_button {
            :deep(.el-form-item__content) {
                justify-content: flex-end;
            }
        }
    }

    // @media (max-width: 768px) {
    //     .share_card {
    //         flex: 1 1 100%;
    //     }
    // }
}
</style>